<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-title">用户登录</div>
      <el-form ref="form" :model="form" :rules="rules" @keyup.enter.native="login">
        <el-form-item prop="username" style="margin-bottom:40px;">
          <el-input v-model="form.username">
            <img slot="suffix" src="../../assets/images/login-account.png" alt="">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" type="password">
            <img slot="suffix" src="../../assets/images/login-password.png" alt="">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="login-error-msg">
        <transition name="el-zoom-in-center">
          <el-alert v-if="errorMsg" type="error" :title="errorMsg" @close="errorMsg = ''" />
        </transition>
      </div>
      <div class="login-submit">
        <el-button :loading="loading" @click="login">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken as login } from '@/api/main';
import { setToken } from '@/utils/auth';
import store from '@/store';
import CryptoJS from 'crypto-js';
export default {
  name: 'Login',
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: { required: true, message: '请输入账号', trigger: 'blur' },
        password: { required: true, message: '请输入密码', trigger: 'blur' }
      },
      errorMsg: '',
      loading: false,
      redirect: ''
    };
  },
  watch: {
    form: {
      handler() {
        this.errorMsg = '';
      },
      deep: true
    }
  },
  created() {
    this.redirect = this.$route.query && this.$route.query.redirect;
  },
  beforeDestroy() {
    this.loading = false;
  },
  methods: {
    login() {
      const form = new FormData();
      form.append('username', this.encrypt(this.form.username));
      form.append('password', this.encrypt(this.form.password));
      form.append('grant_type', 'password');
      form.append('client_id', this.encrypt('cdtye-itps-sysm-client'));
      form.append('client_secret', this.encrypt('cdtye2019'));
      this.$refs.form.validate(valid => {
        if (valid) {
          this.errorMsg = '';
          this.loading = true;
          login(form).then(response => {
            const data = response.data;
            if (data.access_token) {
              setToken(data.access_token);
              store.dispatch('app/setUserInfo', data.user_name);
              this.$router.push({ path: this.redirect || '/' });
              // this.$router.replace('/')
            } else {
              this.errorMsg = data.message;
              this.loading = false;
            }
          }).catch(error => {
            const errorRes = error.response;
            this.errorMsg = errorRes.data.message || '服务器错误';
            this.loading = false;
          });
        }
      });
    },
    encrypt(value) {
      // 如果是32位在java后端解密会报错 AES获取Cipher异常：Illegal key size 16位就不会
      // const key = CryptoJS.enc.Utf8.parse('61DC779D88F539478E45C55452AF9DBB')
      const key = CryptoJS.enc.Utf8.parse('61DC779D88F53947');
      const iv = CryptoJS.enc.Utf8.parse('1b76d0c6af4bcb56');
      const encrypted = CryptoJS.AES.encrypt(value, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      }).toString();
      return encrypted;
    }
  }
};
</script>

<style lang="scss">
.login-container{
  height: 100%;
  background: url('../../assets/images/login-bg.jpg') center/100% 100% no-repeat;
  position: relative;
  .login-box{
    width: 400px;
    position: absolute;
    right: 100px;
    background: url('../../assets/images/login-box.png') center/100% 100% no-repeat;
    top: 50%;
    height: 420px;
    margin-top: -210px;
  }
  .login-title {
    width: 100%;
    font-size: 26px;
    text-align: center;
    margin: 40px auto 30px;
    color: #00eaff;
  }
  .el-form{
    width: 300px;
    margin: 0 auto;
    .el-input{
      background: url('../../assets/images/login-input.png') center/100% 100% no-repeat;
      .el-input__inner{
        color: #2ec3d3;
        background: none;
        border: 0;
        height: 48px;
        line-height: 48px;
      }
      .el-input__suffix{
        right: 10px;
        img{
          vertical-align: bottom;
        }
      }
    }
  }
  .login-error-msg{
    height: 35px;
    width: 300px;
    margin: 0 auto 20px;
    .el-alert--error{
      background-color: rgba(48, 129, 132, 0.5);
      .el-alert__closebtn{
        font-size: 18px;
        top: 8px;
        &:hover{
          color: rgba(48, 129, 132, 1);
        }
      }
    }
  }
  .login-submit{
    width: 300px;
    margin: 0 auto;
    .el-button{
      width: 300px;
      background: #2ec3d3;
      border: none;
      font-size: 18px;
      color: #ffffff;
      outline: none;
      span{
        letter-spacing: 10px;
      }
    }
    .el-button:hover,
    .el-button:focus{
      background: #00eaff;
    }
  }
}
</style>
